<template>
  <div>
    <a-table
      id="tableRef"
      :columns="columns"
      :data-source="data"
      :virtual="false"
      :scroll="{ y: 400 }"
      :customRow="handleCustomRow"
      :pagination="false"
    ></a-table>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {
      columns: [
        {
          title: '项目大类',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '小类',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '项目',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '值',
          dataIndex: 'value1',
          key: 'value1',
          controlProps: {
            id: 'Q20249821739232',
            time: '2024-06-14 14:38:08',
          },
        },
        {
          title: '值',
          dataIndex: 'value2',
          key: 'value2',
          controlProps: {
            id: 'Q20249821739232',
            time: '2024-06-14 14:38:08',
          },
        },
        {
          title: '比较结果',
          dataIndex: 'result',
          key: 'result',
        },
      ],
      data: [
        {
          key: '1',
          value1: 'Q20249821739232',
          value2: 'Q20249821739232 ',
        },
        {
          key: '2',
          value1: '2024-06-14 14:38:08',
          value2: '2024-06-14 14:38:08',
        },
        {
          key: '3',
          name: '标的信息',
          age: '标的信息',
          address: '车牌号',
          value1: '沪A323232',
          value2: '沪A323232',
          result: '相同',
        },
        {
          key: '4',
          name: '标的信息',
          age: '标的信息',
          address: '车牌号',
          value1: '沪A323232',
          value2: '沪A323232',
          result: '相同',
        },
        {
          key: '5',
          name: '标的信息',
          age: '标的信息',
          address: '车牌号',
          value1: '沪A323232',
          value2: '沪A323232',
          result: '相同',
        },
        {
          key: '6',
          name: '标的信息',
          age: '标的信息',
          address: '车牌号',
          value1: '沪A323232',
          value2: '沪A323232',
          result: '相同',
        },
        {
          key: '7',
          name: '标的信息',
          age: '标的信息',
          address: '车牌号',
          value1: '沪A323232',
          value2: '沪A323232',
          result: '相同',
        },
        {
          key: '8',
          name: '标的信息',
          age: '标的信息',
          address: '车牌号',
          value1: '沪A323232',
          value2: '沪A323232',
          result: '相同',
        },
        {
          key: '9',
          name: '标的信息',
          age: '标的信息',
          address: '车牌号',
          value1: '沪A323232',
          value2: '沪A323232',
          result: '相同',
        },
      ],
    }
  },
  components: {},

  mounted() {
    console.log(document.querySelector('#tableRef'), '=====')

    this.cellHeight = document.getElementById('tableRef')?.querySelector('.ant-table-row').offsetHeight
    this.columns = this.columns.slice()
  },
  // computed: {
  //   cellHeight() {
  //     return document.getElementById('tableRef')?.querySelector('.ant-table-row').offsetHeight
  //   },
  // },
  methods: {
    handleCustomRow(record, index, indent, expanded) {
      if (index < 2) {
        console.log(this.cellHeight, index, 'cellHeight')
        const top = index * (this.cellHeight ?? 0)
        // 固定前两行的样式
        return {
          className: 'fixed-row',
          style: { position: 'sticky', top: `${top}px`, zIndex: 10, background: '#FAFAFA' },
        }
      }
    },

    //  拼接字符串
    SplicingStr(item) {
      let str = ''
      for (let key in item) {
        str += item[key] + ' - '
      }
      return str.replace(/ - $/, '')
    },
  },
}
</script>
<style lang="css" scoped>
.titleProps {
  /* 超出不换行 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 超出部分用省略号显示 */
  text-overflow: ellipsis;
}
</style>
